<template>
    <div>
        <h3 class="ivu-mt-8">渠道报表</h3>
        <Form class="ivu-mt-16 ivu-mb-16">
            <DatePicker :editable="false"
                v-model="month"
                v-width="208"
                :clearable="false"
                type="daterange"
                @on-change="changeParams"
            />
            <Select
                v-width="100"
                class="ivu-ml-8"
                v-model="channel"
                @on-change="changeParams"
            >
                <Option :value="1">网络渠道</Option>
                <Option :value="2">市场渠道</Option>
            </Select>
            <Select
                v-width="118"
                class="ivu-ml-8"
                clearable
                filterable
                placeholder="请选择部门"
                v-model="department_id"
                @on-change="changeDepartment"
            >
                <Option
                    v-for="(item, index) in departmentList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}</Option
                >
            </Select>
            <Select
                v-if="department_id"
                v-width="118"
                class="ivu-ml-8"
                clearable
                filterable
                placeholder="请选择人员"
                v-model="belong_member_id"
                @on-change="changeParams"
            >
                <Option
                    v-for="(item, index) in memberList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}</Option
                >
            </Select>
            <TreeSelect
                class="ivu-ml-8" placeholder="请选择病种" v-model="diseases_id" :data="diseaseslist" v-width="200"  @on-change="changeParams"/>
        </Form>
        <Table
            row-key="id"
            :max-height="500"
            :columns="columns"
            :data="dataWithPage"
            :loading="loading"
            show-summary
            :summary-method="handleSummary"
        >
        </Table>
    </div>
</template>
<script>
    import dayjs from 'dayjs';
    import { mapState } from 'vuex';
    import { getChannelRate, getMemberSelect, statisticspatientarrivereportdiseaseslist } from '@/api/TApi/index.js';
    export default {
        name: 'consultant',
        props: {
            departmentList: {
                type: Array,
                default: () => []
            }
        },
        data () {
            return {
                diseaseslist: [],
                month: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
                channel: 1,
                department_id: '',
                belong_member_id: '',
                diseases_id: '',
                dataWithPage: [],
                memberList: [],
                mj: {
                    normal: '',
                    desc: 2,
                    asc: 1
                },
                sortParams: {
                    all_created: '',
                    created_visit: '',
                    all_visit: '',
                    all_first_consume: ''
                },
                loading: false,
                columns: [],
                columnss: [
                    // {
                    //     title: "初诊消费",
                    //     key: "all_first_consume",
                    //     minWidth: 120,
                    //     sortable: true,
                    // },
                ]
            };
        },
        computed: {
            ...mapState('admin/user', ['info'])
        },
        methods: {
            changeDepartment () {
                if (this.department_id) {
                    if (!this.belong_member_id) {
                        this._getChannelRate();
                    } else {
                        this.belong_member_id = '';
                    }
                    getMemberSelect({
                        department_id: this.department_id
                    }).then((res) => {
                        this.memberList = res;
                    });
                } else {
                    this.belong_member_id = ''
                    this.memberList = [];
                    this._getChannelRate();
                }
            },
            changeParams () {
                this._getChannelRate();
            },
            handleSummary ({ columns, data }) {
                const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (key === 'visit_percent' || key === 'visit_rate') {
                        return (sums[key] = {
                            key,
                            value: ''
                        });
                    } else {
                        if (index === 0) {
                            sums[key] = {
                                key,
                                value: '合计'
                            };
                            return;
                        }
                        const values = data.map((item) => Number(item[key]));
                        if (!values.every((value) => isNaN(value))) {
                            const v = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            sums[key] = {
                                key,
                                value: v
                            };
                        } else {
                            sums[key] = {
                                key,
                                value: 'N/A'
                            };
                        }
                    }
                });

                return sums;
            },
            _getChannelRate () {
                let params = {
                    type: this.channel === undefined ? '' : this.channel,
                    department_id:
                        this.department_id === undefined ? '' : this.department_id,
                    start_time: dayjs(this.month[0]).format('YYYY-MM-DD'),
                    end_time: dayjs(this.month[1]).format('YYYY-MM-DD'),
                    sort_all_created: this.sortParams.all_created,
                    sort_created_visit: this.sortParams.created_visit,
                    sort_all_visit: this.sortParams.all_visit,
                    sort_all_first_consume: this.sortParams.all_first_consume,
                    belong_member_id: this.belong_member_id,
                    diseases_id: this.diseases_id
                };
                this.loading = true;
                getChannelRate(params).then((res) => {
                    this.loading = false;
                    this.dataWithPage = Object.freeze(res);
                });
            }
        },
        mounted () {
            this.logs(1111)
            statisticspatientarrivereportdiseaseslist().then(res => {
                this.diseaseslist = res
            })
            this._getChannelRate();
            // this.columns = JSON.parse(JSON.stringify(this.columnss));
            if (+this.info.is_super === 1) {
                this.columns = [
                    {
                        title: '渠道',
                        key: 'source_name',
                        minWidth: 150,
                        tree: true
                    },
                    {
                        title: '新增',
                        key: 'all_created',
                        minWidth: 120,
                        sortable: true
                    },
                    {
                        title: '新增到诊',
                        key: 'created_visit',
                        minWidth: 120,
                        sortable: true
                    },
                    {
                        title: '总到诊',
                        key: 'all_visit',
                        minWidth: 120,
                        sortable: true
                    },
                    {
                        title: '到诊率',
                        key: 'visit_rate',
                        minWidth: 120,
                        sortable: true,
                        render: (h, params) => {
                            return h(
                                'div',
                                {},
                                parseInt(params.row.visit_rate * 1000) / 10 + '%'
                            );
                        }
                    },
                    {
                        title: '到诊占比',
                        key: 'visit_percent',
                        minWidth: 120,
                        render: (h, params) => {
                            return h(
                                'div',
                                {},
                                parseInt(params.row.visit_percent * 1000) / 10 + '%'
                            );
                        }
                    }
                ];
            } else {
                this.columns = [
                    {
                        title: '渠道',
                        key: 'source_name',
                        minWidth: 150,
                        tree: true
                    },
                    {
                        title: '新增',
                        key: 'all_created',
                        minWidth: 120,
                        sortable: true
                    },
                    {
                        title: '新增到诊',
                        key: 'created_visit',
                        minWidth: 120,
                        sortable: true
                    },
                    {
                        title: '总到诊',
                        key: 'all_visit',
                        minWidth: 120,
                        sortable: true
                    },
                    {
                        title: '到诊率',
                        key: 'visit_rate',
                        minWidth: 120,
                        sortable: true,
                        render: (h, params) => {
                            return h(
                                'div',
                                {},
                                parseInt(params.row.visit_rate * 1000) / 10 + '%'
                            );
                        }
                    },
                    {
                        title: '到诊占比',
                        key: 'visit_percent',
                        minWidth: 120,
                        render: (h, params) => {
                            return h(
                                'div',
                                {},
                                parseInt(params.row.visit_percent * 1000) / 10 + '%'
                            );
                        }
                    }
                ];
            }
        }
    };
</script>
